<template>
    <div class="f fac fpc" :style="{width: '100%', height}">
        <!-- <el-result icon="warning" title="404提示" sub-title="你找的页面丢失了">
            <template #extra>
                <el-button type="primary" v-if="isShow" @click="$router.replace('/')">返回首页</el-button>
            </template>
        </el-result> -->
        <el-empty description="你找的页面丢失了">
            <div class="tip" v-if="isShow">
                <span class="second">{{ second }}</span>
                <span class="text">秒后自动返回首页</span>
                <el-link type="primary" @click="$router.replace('/')">立刻返回</el-link>
            </div>
        </el-empty>
    </div>
</template>

<script setup>
    import { ref, onMounted, computed } from 'vue'
    import { useRoute, useRouter } from 'vue-router';

    const route = useRoute()
    const router = useRouter()

    const second = ref(5)
    const timer = ref(null)

    onMounted(() => {
        if (!isShow.value) return
        if (timer.value) {
            clearInterval(timer.value)
        }
        timer.value = setInterval(() => {
            second.value--
            if (second.value <= 1) {
                clearInterval(timer.value)
                timer.value = null
                router.replace('/')
            }
        }, 1000)
    })

    const height = computed(() => {
       return (route.path.startsWith("/home") || route.path.startsWith("/farm")) ? '100%' : '100vh'
    })
    const isShow = computed(() => {
        return !(route.path.startsWith("/home") || route.path.startsWith("/farm"))
    })
</script>

<style lang="scss" scoped>
.tip {
    display: flex;
    align-items: center;
    .second {
        color: $ncpColor;
        font-size: 0.2rem;
        margin-right: 3px;
    }
    .text {
        margin-right: 0.1rem;
    }
}
    
</style>